${template "main_header.html"}
<div id="app" class="page-content" :style="!urlobj.dialogstate ? 'margin-top:60px;':'margin-top:10px;'">
	<tab-tag v-if="!urlobj.dialogstate"></tab-tag>

	<div style="margin:0 15px 15px 15px;">
		<el-card shadow="never" style="min-height:650px;">
			<div v-if="search_visible" id="search" class="search">
				<el-form ref="form" size="small" :model="searchData" inline>
					<el-form-item label="角色名称">
						<el-input id="name" v-model="searchData.name" style="width:150px;" placeholder="请输入角色名称"></el-input>
					</el-form-item>
					<el-form-item label="状态">
						<el-select style="width:150px" v-model="searchData.status" filterable clearable placeholder="请选择">
							<el-option key="0" label="正常" value="1"></el-option>
							<el-option key="1" label="禁用" value="0"></el-option>
						</el-select>
					</el-form-item>
					<search-tool :search_data.sync="searchData" @refesh_list="index"></search-tool>
				</el-form>
			</div>
			<div class="btn-group" style="margin-top:10px;margin-bottom:10px;">
				<div>
					<el-button v-for="item in button_group" :key="item.access" v-if="checkPermission(item.access,'','1',[1])" :disabled="$data[item.disabled]" :type="item.color" size="mini" :icon="item.icon" @click="fn(item.clickname)">
						<span v-if="item.batch" v-text="$data['batchUpdateStatus']?'批量保存':'批量编辑'"></span>
						<span v-else v-text="item.name"></span>
					</el-button>
				</div>
				<div><table-tool :search_visible.sync="search_visible" @refesh_list="index"></table-tool></div>
			</div>
			<el-table :row-class-name="rowClass" @selection-change="selection" @row-click="handleRowClick" row-key="id" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading" ref="multipleTable" border class="eltable" :data="list" style="width: 100%">
				<el-table-column align="center" type="selection" width="42"></el-table-column>
				<el-table-column align="center" type='' property="id" label="编号" show-overflow-tooltip width="70">
				</el-table-column>
				<el-table-column align="center" property="name" label="角色名称" show-overflow-tooltip width="">
				</el-table-column>
				<el-table-column align="center" property="status" label="状态" show-overflow-tooltip width="">
					<template slot-scope="scope">
						<el-switch @change="updateExt(scope.row,'status')" :active-value="1" :inactive-value="0" v-model="scope.row.status"></el-switch>
					</template>
				</el-table-column>
				<el-table-column align="center" property="description" label="描述" show-overflow-tooltip width="">
				</el-table-column>
				<el-table-column :fixed="ismobile()?false:'right'" label="操作" align="center" width="180">
					<template slot-scope="scope">
						<div v-if="scope.row.id">
							<el-button v-if="checkPermission('/admin/Role/update.html','','1',[1])" size="mini" icon="el-icon-edit" type="primary" @click="update(scope.row)">修改</el-button>
							<el-button v-if="checkPermission('/admin/Role/delete.html','','1',[1])" size="mini" icon="el-icon-delete" type="danger" @click="del(scope.row)">删除</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index" />
		</el-card>

		<!--添加-->
		<Add :show.sync="dialog.addDialogStatus" size="small" @refesh_list="index"></Add>
		<!--修改-->
		<Update :info="updateInfo" :show.sync="dialog.updateDialogStatus" size="small" @refesh_list="index"></Update>
	</div>
</div>
<script src="/assets/js/app.js"></script>
<script src="/assets/admin/role/add.js?v=3527"></script>
<script src="/assets/admin/role/update.js?v=5970"></script>
<script>
	new Vue({
		el: '#app',
		components: {},
		data: function() {
			return {
				dialog: {
					addDialogStatus: false,
					updateDialogStatus: false,
				},
				searchData: {},
				button_group: [{
						name: '添加',
						color: 'success',
						access: '/admin/Role/add.html',
						icon: 'el-icon-plus',
						disabled: '',
						clickname: 'add'
					},
					{
						name: '修改',
						color: 'primary',
						access: '/admin/Role/update.html',
						icon: 'el-icon-edit',
						disabled: 'single',
						clickname: 'update'
					},
					{
						name: '删除',
						color: 'danger',
						access: '/admin/Role/delete.html',
						icon: 'el-icon-delete',
						disabled: 'multiple',
						clickname: 'del'
					},
				],
				loading: false,
				page_data: {
					limit: 20,
					page: 1,
					total: 20,
				},
				ids: [],
				single: true,
				multiple: true,
				search_visible: false,
				list: [],
				updateInfo: {},
			}
		},
		methods: {
			index() {
				let param = {
					limit: this.page_data.limit,
					page: this.page_data.page
				}
				Object.assign(param, this.searchData)
				this.loading = true
				axios.post('/admin/role/index.html', param).then(res => {
					if (res.data.status == 200) {
						this.list = res.data.data.data
						this.page_data.total = res.data.data.total
						this.loading = false
					} else {
						this.$message.error(res.data.msg);
					}
				})
			},
			updateExt(row, field) {
				if (row.id) {
					axios.post('/admin/role/updateExt', {
						id: row.id,
						[field]: row[field]
					}).then(res => {
						if (res.data.status == 200) {
							this.$message({
								message: res.data.msg,
								type: 'success'
							})
						} else {
							this.$message.error(res.data.msg)
						}
					})
				}
			},
			add() {
				this.dialog.addDialogStatus = true
			},
			update(row) {
				let id = row.id ? row.id : this.ids.join(',')
				axios.post('/admin/role/getUpdateInfo', {
					id: id
				}).then(res => {
					if (res.data.status == 200) {
						this.dialog.updateDialogStatus = true
						this.updateInfo = res.data.data
						this.updateInfo.access = this.updateInfo.access.split(",")
					} else {
						this.$message.error(res.data.msg)
					}
				})
			},
			del(row) {
				this.$confirm('确定操作吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let ids = row.id ? row.id : this.ids.join(',')
					axios.post('/admin/role/delete', {
						id: ids
					}).then(res => {
						if (res.data.status == 200) {
							this.$message({
								message: res.data.msg,
								type: 'success'
							})
							this.index()
						} else {
							this.$message.error(res.data.msg)
						}
					})
				}).catch(() => {})
			},
			selection(selection) {
				this.ids = selection.map(item => item.id)
				this.single = selection.length != 1
				this.multiple = !selection.length
			},
			handleRowClick(row, rowIndex, event) {
				if (event.target.className !== 'el-input__inner') {
					this.$refs.multipleTable.toggleRowSelection(row)
				}
			},
			rowClass({
				row,
				rowIndex
			}) {
				for (let i = 0; i < this.ids.length; i++) {
					if (row.id === this.ids[i]) {
						return 'rowLight'
					}
				}
			},
			fn(method) {
				this[method](this.ids)
			},
		},
		mounted() {
			this.index()
		},
	})
</script>
${template "main_footer.html"}